<template>
  <div class="taskPanelBox board-border">
    <div class="previousPage" @click="previousPage"><a-icon type="left" /></div>
    <div class="panelBox" v-for="(item, index) in taskLists" :key="index">
      <div class="lefeBox">
        <!-- 生产任务 -->
        <div class="headBox">
          <div class="task">
            <span>{{ item.taskName }}</span>
          </div>
          <div class="status">
            <span>{{ item.status }}</span>
          </div>
        </div>
        <!-- 进度条 -->
        <div class="boardProgressBox">
          <BoardProgress
            :expect="item.nowPlanCount"
            :reality="item.nowActualCount"
            :plan="item.planCount"
          ></BoardProgress>
        </div>
        <!-- 三个方框 -->
        <div class="infoBox">
          <div class="warp board-border-min">
            <div class="title">
              <span>{{ item.productName }}</span>
            </div>
            <div class="subtitle"><span>工件名称</span></div>
          </div>
          <div class="warp board-border-min">
            <div class="title">
              <span>{{ item.planCount }}</span>
            </div>
            <div class="subtitle"><span>计划完成数</span></div>
          </div>
          <div class="warp board-border-min">
            <div class="title">
              <span>{{ item.endTime }}</span>
            </div>
            <div class="subtitle"><span>计划完成时间</span></div>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <NormalPie :pieData="item.pieData"></NormalPie>
      </div>
    </div>
    <div class="nextPage" @click="nextPage"><a-icon type="right" /></div>
  </div>
</template>

<script>
import moment from 'moment';
import api from '@api/api';
import { getRoleId } from '@/unit/tool';
// import { RepairType } from '@/unit/constantValue';
import NormalPie from '@components/echart/normalPie';
import BoardProgress from '../boardProgress';
import { themeOption } from '@components/echart/buildEChartOption';
import '@assets/styles/publicStyle/index.less';

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('board/');

function buildPieData(pieDataLists, productParames) {
  let lists = [{ option: {}, data: [] }];
  let dataLists = [];
  let legendData = [];
  // 控制显示的项目数
  // let showCount = 10;

  dataLists = pieDataLists.map((item) => {
    return {
      ...item,
    };
  });

  dataLists = dataLists.sort((a, b) => {
    return b.value - a.value;
  });
  // .slice(0, showCount);

  legendData = dataLists.map((item, index) => {
    let name = item.name == '' ? '未知字段' : item.name;
    return name;
  });

  lists[0].option = {
    radius: ['54', '64'],
    center: ['116', '74'],
    clockwise: false,
    label: {
      position: 'inner',
      formatter: function(e) {
        // let newValue = Math.ceil(parseFloat(e.percent));
        // if (newValue >= 5) {
        //   return newValue + '%';
        // } else {
        //   return '';
        // }
        return '';
      },
    },
  };

  lists[0].data = dataLists;

  let { reality, pickCount, percent } = productParames;

  return {
    // tooltip: {
    //   formatter: (params) => `<p>${params.marker}${params.name}&nbsp;${parseInt(moment.duration(params.value * 1000).asHours())}小时</p>`,
    // },
    color: ['#00D98B', '#F03F58'],
    graphic: [
      {
        type: 'text',
        left: 92,
        top: 60,
        style: {
          text: percent,
          textAlign: 'center',
          fill: '#FFFFFF',
          fontSize: 24,
          fontWeight: 400,
        },
      },
      {
        type: 'text',
        left: 102,
        top: 88,
        style: {
          text: '产出',
          textAlign: 'center',
          fill: '#FFFFFF',
          fontSize: 14,
          fontWeight: 400,
        },
      },
      {
        type: 'text',
        left: 80,
        top: 154,
        style: {
          text: `领料数: ${pickCount}`,
          textAlign: 'center',
          fill: '#FFFFFF',
          fontSize: 16,
          fontWeight: 400,
        },
      },
      {
        type: 'text',
        left: 80,
        top: 176,
        style: {
          text: `产出数: ${reality}`,
          textAlign: 'center',
          fill: '#FFFFFF',
          fontSize: 16,
          fontWeight: 400,
        },
      },
    ],
    legend: {
      orient: 'vertical',
      left: '360',
      top: '80',
      icon: 'circle',
      // data: legendData,
      data: [],
      textStyle: {
        fontSize: 12,
        fontWeight: 200,
        color: '#FFFFFF',
      },
      // formatter: (params) => {
      //   let str = '';
      //   dataLists.forEach((item, index) => {
      //     if (params == item.name) {
      //       str = `${item.name} : ${parseInt(moment.duration(item.value * 1000).asHours())}小时`;
      //     }
      //     return false;
      //   });

      //   return str;
      // },
    },
    dataLists: lists,
  };
}

function formatArray(lists) {
  return lists.map((item, index) => {
    let { status, ...rest } = item;
    let doneNum = parseInt(item.nowActualCount);
    let undoneNum = parseInt(item.pickCount) - parseInt(item.nowActualCount);
    let pieDataLists = [
      {
        name: '已完成',
        value: doneNum,
      },
      {
        name: '未完成',
        value: undoneNum < 0 ? 0 : undoneNum,
      },
    ];

    let productParames = {};
    if (parseInt(item.pickCount) !== 0) {
      let percent = parseInt((parseInt(item.nowActualCount) / parseInt(item.pickCount)) * 100) + '%';
      productParames = {
        reality: item.nowActualCount,
        pickCount: item.pickCount,
        percent,
      };
    } else {
      productParames = {
        reality: item.nowActualCount,
        pickCount: 0,
        percent: '0%',
      };
    }

    return {
      status: formatStatus(status),
      pieData: buildPieData(pieDataLists, productParames),
      ...rest,
    };
  });

  function formatStatus(value) {
    switch (parseInt(value)) {
      case 0:
        return '未开始';
      case 1:
        return '进行中';
      case 2:
        return '完成';
      default:
        break;
    }
  }
}

export default {
  name: 'taskPanel',
  components: {
    NormalPie,
    BoardProgress,
  },
  props: {},
  data() {
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      pieData: {},
      taskLists: [],
      pageOption: {
        pageNum: 1,
        pageSize: 2,
        total: '',
      },
    };
  },
  watch: {
    timeSwich: function(newValue, oldValue) {
      let { pageNum } = this.pageOption;
      // let { startTime, endTime } = newValue;
      // this.boardGetAllTask({ startTime, endTime }, 'taskLists');
      this.boardGetAllTask({ pageNum }, 'taskLists');
    },
  },
  computed: {
    ...mapState(['timeSwich']),
  },
  methods: {
    // 获取报警统计
    async boardGetAllTask(parames, key) {
      let { pageNum, pageSize } = this.pageOption;
      const resData = await api.boardGetAllTask({ companyId: this.compId, status: -1, pageSize, ...parames });
      // let dataLists = [];
      this.pageOption.total = resData.total;
      this[key] = formatArray(resData.rows);
    },

    //

    previousPage() {
      let { pageNum, pageSize, total } = this.pageOption;
      let max = Math.ceil(parseInt(total) / parseInt(pageSize));
      if (pageNum > 1) {
        this.pageOption.pageNum = this.pageOption.pageNum - 1;
        this.boardGetAllTask({ pageNum: this.pageOption.pageNum }, 'taskLists');
      }
    },

    nextPage() {
      let { pageNum, pageSize, total } = this.pageOption;
      let max = Math.ceil(parseInt(total) / parseInt(pageSize));
      if (pageNum < max) {
        this.pageOption.pageNum = this.pageOption.pageNum + 1;
        this.boardGetAllTask({ pageNum: this.pageOption.pageNum }, 'taskLists');
      }
    },
  },
  created() {},
  mounted() {
    getRoleId(this);
  },
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
